<template>
    <div>
        <Row>
            <i-col span="20">
                <Row>
                    <Card>
                        <p slot="title">
                            <Icon type="person"></Icon>
                            编辑商品分类
                        </p>
                        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">

                            <FormItem label="分类名称" prop="name">
                                <Input v-model="formValidate.name" placeholder="请输入分类名称"></Input>
                            </FormItem>
                            <FormItem label="缩略图" prop="thumb">
                                <Upload ref="avatar_upload" :before-upload="beforeUpload"
                                        :show-upload-list="showProgress"
                                        type="drag"
                                        :on-success="uploadAvatarSuccess"
                                        :action="`${host}/admin/upload?token=${$store.state.access_token}`">
                                    <div style="padding: 20px 0">
                                        <img class="thumb" v-if="formValidate.thumb" :src="formValidate.thumb_url"/>
                                        <template v-if="!formValidate.thumb">
                                            <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                                            <p>点击或将文件拖拽到这里上传</p>
                                        </template>
                                    </div>
                                </Upload>

                            </FormItem>
                            <FormItem label="上级分类" prop="pid">
                                <i-select transfer v-model="formValidate.pid">
                                    <i-option :key="item.id" v-for="item in categories" :value="item.id">{{item.name}}
                                    </i-option>
                                </i-select>
                            </FormItem>

                            <FormItem label="状态">
                                <i-switch v-model="formValidate.status" size="large">
                                    <span slot="open">启用</span>
                                    <span slot="close">禁用</span>
                                </i-switch>
                            </FormItem>
                            <FormItem>
                                <Button :loading="$store.state.loading" type="primary"
                                        @click="handleSubmit('formValidate')">提交
                                </Button>
                                <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置
                                </Button>
                            </FormItem>
                        </Form>
                    </Card>
                </Row>
            </i-col>
        </Row>
    </div>
</template>
<script type="text/jsx">

  import url from '../../../config/url'
  import time from '../../../libs/time'

  import E from 'wangeditor'
  import util from '../../../libs/util'
  import WEditor from '../../common/components/Weditor.vue'

  export default {

    components: {
      WEditor,
    },
    name: 'shop-category-edit',

    data () {
      return {
        host: url.host,
        categories: [],
        id:0,
        formValidate: {
          name: '',
          pid: 0,
          thumb_url: '',
          thumb: '',
          status: true
        },
        showProgress: false,
        ruleValidate: {
          name: [
            {required: true, message: '分类名不能为空', trigger: 'blur'}
          ],
          thumb: [
            {required: true, message: '请上传缩略图', trigger: 'blur'}
          ]
        }

      }
    },
    computed: {},

    mounted () {
      this.loadDetail()
      this.loadServices()
    },
    destroyed () {

    },
    methods: {
      beforeUpload () {
        this.showProgress = true
        return true
      },
      loadDetail(){
        this.id = this.$route.params.category_id
        let data = this.$route.params.item;
        this.formValidate.name = data.name
        this.formValidate.thumb_url = data.thumb
        this.formValidate.thumb = data.thumb
        this.formValidate.pid = data.pid
        this.formValidate.status = (data.status == 1 ? true : false)
//        $api.get(`${url.shop_category}/${this.id}`).then((res) => {
//          if (res.status) {
//            let data = res.data
//
//          }
//        })
      },

      loadServices () {
        $api.get(url.shop_category, {params: {pid: 0}}).then((res) => {
          if (res.status) {
            this.categories = []
            let item = {id: 0, name: '顶级分类'}
            this.categories.push(item)
            this.categories = this.categories.concat(res.data)
          }
        })
      },
      uploadAvatarSuccess (response, file, fileList) {
        this.showProgress = false
        console.log(response.data)
        this.$refs.avatar_upload.clearFiles()
        if (response.status) {
          this.formValidate.thumb_url = response.data.url
          this.formValidate.thumb = response.data.file
        }

      },
      handleSubmit (name) {

          this.$refs[name].validate((valid) => {
            if (valid) {
              let data = this.formValidate
              this.$store.commit('setLoading', {loading: true})
              data.status = data.status ? 1 : 0
              $api.put(`${url.shop_category}/${this.id}`, data).then((res) => {
                this.$store.commit('setLoading', {loading: false})
                if (res.status) {
                  this.$Message.success('编辑成功')
                  util.closeCurrentPage(this,'shop_category_edit')
                }
              })
            } else {
              this.$Message.error('表单验证失败!')
            }
          })


      },
      handleReset (name) {
        this.$refs[name].resetFields()

      }

    }
  }
</script>
<style lang="less" scoped>
    .fitter-panel {
        background: #f0f0f0;
        padding: 12px;
        display: flex;
        flex-direction: row;
        align-items: center;
        p {
            font-size: 12px;
            margin-left: 12px;
            margin-right: 12px;
        }
    }
    .thumb {
        max-height: 120px;
        max-width: 100%;
    }

    .button-group-panel {
        margin-top: 12px;
    }

    .table-content {
        margin-top: 12px;
    }
</style>